﻿<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta id="viewport" name="viewport" content="width=480,user-scalable=no,target-densitydpi=high-dpi" />
<title>排行榜</title>
<style>
body{ background:url(images/bgrank.jpg) no-repeat center top; overflow:hidden;}
.rank_list{ padding:150px 15px 160px; height:330px;}
li, ul{ list-style:none; overflow:hidden;}
.rank_list div{ float:left;}
.rank_list li{ width:100%; height:30px; line-height:30px;}
.rank_list .xuhao{ width:20%; height:30px; line-height:30px; text-align:center;}
.rank_list .xingmin{ width:50%; height:30px; line-height:30px; text-align:center;}
.rank_list .shijian{ width:30%; height:30px; line-height:30px; text-align:center;}
.again{display:block; width:200px; height:77px; margin:0 auto; background:url(images/again.png) no-repeat center;}
.my{ color:#f50;}
</style>
</head>
<body>
<ul class="rank_list">
  <li class="my"><div class="xuhao">1</div><div class="xingmin"></div><div class="shijian"></div></li>
</ul>
  <a href="http://valentine.12yishu.com/wap" class="again"></a>

  <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript"></script>
  <script src="js/mui.min.js?v2.0.18" type="text/javascript" charset="utf-8"></script>
  <script src="js/jquery.js?v2.0.18"></script>
  <script src="js/common.js?v2.0.18"></script>
  <script>
      baseApi.get(
          'qixi/rank',
          function (result){
              // 本人成绩
              $('.my').find('.xuhao').text('我').end()
                  .find('.xingmin').text(result.my.nickname).end()
                  .find('.shijian').text(result.my.highest_score).end()

              // 排行
              result.rank.forEach(function (item, index) {
                  var html = ' <li><div class="xuhao">'+(index+1)+'</div><div class="xingmin">'+item.nickname+'</div><div class="shijian">'+item.highest_score+'秒</div></li>';
                  $('.rank_list').append(html);
              });
          }
      );
  </script>
</body>
</html>